<template>
  <div style="width: 100%" class="input-modal">
    <a-input
      v-model="userName"
      placeholder="请选择"
      allow-clear
      readonly
      style="width: 100%"
      @clear.stop="handerClear"
    >
      <template #append>
        <div class="apppend-box" @click="select"><icon-more /></div>
      </template>
    </a-input>
    <userModal
      v-if="visible"
      :user="user"
      :width="'1000'"
      :title="props.title"
      @close="close"
      @handle-ok="handleOk"
    />
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import userModal from '@/common/components/userAndDept/userModal.vue';

  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    valueName: {
      type: String,
      default: 'userCode',
    },
    name: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '选择用户',
    },
  });
  const emit = defineEmits([
    'update:modelValue',
    'close',
    'update:name',
    'update:code',
    'handleOk',
  ]);
  const visible = ref(false);
  const user = ref({
    userId: '',
    userName: '',
  });
  const userName = ref(props.modelValue);
  watch(
    () => props.modelValue,
    (n: string) => {
      if (!n) {
        userName.value = n;
      }
    },
    { deep: true }
  );
  watch(
    () => props.name,
    (n: string) => {
      if (n) {
        userName.value = n;
      }
    },
    { deep: true }
  );
  const select = () => {
    visible.value = true;
  };
  const close = () => {
    visible.value = false;
  };
  const handleOk = (val: any) => {
    userName.value = val.username;
    emit('update:modelValue', val[props.valueName]);
    emit('update:name', val.username);
    emit('update:code', val.userCode);
    emit('handleOk', val);
  };
  const handerClear = () => {
    emit('update:modelValue', undefined);
    emit('update:name', undefined);
    emit('update:code', undefined);
  };
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
  .apppend-box {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
